
let banner = document.querySelector(".banner")
let bannerContainer = document.querySelector("#banner-container")
let allshop = document.querySelector("#allshop");// ul
let tailender = document.querySelector(".tailender"); // 最后一个li
let btns = bannerContainer.getElementsByTagName('li');// 所有的li
let smlist = bannerContainer.getElementsByClassName("smlist") // 获取隐藏菜单
let bannerBox = document.getElementById('banner-box');
let lis = bannerBox.getElementsByTagName('li');
let spans = bannerBox.getElementsByTagName('span');
let prevBtn = bannerBox.getElementsByClassName('prev')[0];
let nextBtn = bannerBox.getElementsByClassName('next')[0];
let point = document.querySelector('.point');
let now = 0;
let goTop = document.getElementById('goTop');



let ntime = document.querySelector('.time strong')
let hour = document.querySelector('.time .hour')
let min = document.querySelector('.time .minute')
let sec = document.querySelector('.time .second')
let logo = document.querySelector('.logo')


// # ------显示隐藏菜单-------------
allshop.onmousemove = function (e) {
  tailender.style.display = "block";
};
allshop.onmouseout = function () {
  tailender.style.display = "none";

};
for(let i = 0; i < btns.length; i++){
  btns[i].index = i
  btns[i].onmouseover = function(){
    for(let j = 0; j < btns.length;j++){
      smlist[j].style.display = "none"
    }
    smlist[this.index].style.display = "block"
  }
}
allshop.onmouseleave = function () {
  Array.from(smlist).forEach((v) => {
      v.style.display = "none"
  })
}
//# --------------------------

//# ------------ 轮播图--------------
let iw = lis[0].offsetWidth;
for (let i = 0; i < lis.length; i++) {
    lis[i].style.left = iw + 'px';
}
lis[0].style.left = 0;

function spanMove() {
    for (let i = 0; i < spans.length; i++) {
        spans[i].className = '';
    }
    spans[now].className = 'active';
}

function next() {
    startMove(lis[now], {
        'left': -iw
    });
    now = ++now > lis.length - 1 ? 0 : now;
    lis[now].style.left = iw + 'px';
    startMove(lis[now], {
        'left': 0
    });
    spanMove();
}

function prev() {
    startMove(lis[now], {
        'left': iw
    });
    now = --now < 0 ? lis.length - 1 : now;
    lis[now].style.left = -iw + 'px';
    startMove(lis[now], {
        'left': 0
    });
    spanMove();
}

timer = setInterval(next, 3000);

bannerBox.onmouseenter = function () {
    clearInterval(timer);
}

bannerBox.onmouseleave = function () {
    timer = setInterval(next, 3000);

}

prevBtn.onclick = function () {
    prev();
}
nextBtn.onclick = function () {
    next();
}
//# ----------------------------------

//# ------倒计时---------
function fn() {
    let dateD = new Date()
    let a = dateD.getHours()
    let time = 0
    if (a % 2) {
        a--;
    }

    time = a
    if (a < 10) {
        time = '0' + a + ':00'
        ntime.innerHTML = time
    } else {
        ntime.innerHTML = time + ':00'
    }
    //计算时间
    let timeEnd = new Date()
    timeEnd.setHours(a + 2)
    timeEnd.setMinutes(0)
    timeEnd.setSeconds(0)
    let timeNow = new Date()
    let deff = (timeEnd - timeNow) / 1000
    let h = parseInt(deff / 60 / 60)
    let m = parseInt(deff / 60 % 60)
    let s = parseInt(deff % 60)
    hour.innerHTML = '0' + h
    min.innerHTML = m > 10 ? m : '0' + m
    sec.innerHTML = s > 10 ? s : '0' + s

}
fn()
setInterval(fn, 1000)
//# -------------------------
//# ------回到顶部-----
let speed = 180;
let speedTimer = setInterval(function () {
    speed -= 5;
    if (speed <= 0) {
        speed = 180;
    }
}, 500);

goTop.onclick = function () {
    let scrollY = window.scrollY;
    let timer = setInterval(function () {
        scrollY -= speed;
        if (scrollY <= 0) {
            clearInterval(timer);
        }
        window.scrollTo(0, scrollY);
    }, 30);
}
//#----------------------

//# --------获取数据-----------------
 const baseUrl = "http://localhost:8888";
 //* 每日秒杀
ajax({
    url: baseUrl + "/goods/list",
    type: "get",
    params: { current: 1, pagesize: 4 },
    fn: function (resData) {
        // console.log(JSON.parse(resData));
        resData = JSON.parse(resData);
        // console.log(resData);
        let html = "";
        resData.list.forEach(o => {
            html += `
            <div class="contact" onclick="addGoods('${o.goods_id}','${o.img_big_logo}','${o.title}','${o.current_price}','${o.price}')">
            <img src="${o.img_big_logo}">
            <div class="byshop">
            <p class="info">${o.title}</p>
            <p class="price">
                <span style="font-size: 15px;color: #a92112;">￥</span>
                <span style="font-size: 22px;color: #a92112;">${o.current_price}</span>
                <span style="font-size: 12px;color: #a92112;">起</span>
                <span style="text-decoration: line-through;font-size: 14px;color: #333;">￥${o.price}</span>
            </p>
        </div>
    </div>
            `

            // console.log(html);
        })
        document.querySelector(".spike-bar .contact-list").innerHTML = html;
    },
  })
//* 每日新品
  ajax({
    url: baseUrl + "/goods/list",
    type: "get",
    params: { current: 11, pagesize: 4 },
    fn: function (resData) {
        // console.log(JSON.parse(resData));
        resData = JSON.parse(resData);
        // console.log(resData);
        let html = "";
        resData.list.forEach(o => {
            html += `
            <div class="contact" onclick="addGoods('${o.goods_id}','${o.img_big_logo}','${o.title}','${o.current_price}','${o.price}','${o.category}')">
            <img src="${o.img_big_logo}">
        <div class="byshop">
            <p class="info">${o.category}</p>
            <p class="infoo" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${o.title}</p>
            <p class="price">
                <span style="font-size: 15px;color: #a92112;">￥</span>
                <span style="font-size: 22px;color: #a92112;">${o.price}</span>
                <!-- <span style="font-size: 12px;color: #a92112;">起</span> -->
            </p>
        </div>
    </div>
            `

            // console.log(html);
        })
        html = `<div class="title">
    <h2>
        每日新品
        <span>
            每日十点惊喜不断
        </span>
        <span class="more">更多 ></span>
    </h2>
</div>
${html}`
        document.querySelector(".newproduct-bar").innerHTML = html;
    },
  })
//* 专属推荐
ajax({
    url: baseUrl + "/goods/list",
    type: "get",
    params: { current: 4, pagesize: 12 },
    fn: function (resData) {
        // console.log(JSON.parse(resData));
        resData = JSON.parse(resData);
        // console.log(resData);
        let html = "";
        resData.list.forEach(o => {
            html += `
            <div class="contact" onclick="addGoods('${o.goods_id}','${o.img_big_logo}','${o.title}','${o.current_price}','${o.price}','${o.category}')">
            <img
            src="${o.img_big_logo}">
        <div class="title">
            ${o.category}
        </div>
        <div class="info">
            <div>
                <span style="color:white; background: #D96B6C;">特价</span>
            </div>
            <p class="p1">${o.title}</p>
            <p class="p2">
                <span style="font-size: 13px;color: #a92112;">￥</span>
                <span style="font-size: 20px;color: #a92112;">${o.current_price}</span>
            </p>
        </div>
    </div>
            `

            // console.log(html);
        })
        html = `<div class="title">
    <h2>
        专属推荐
        <span class="more">更多 ></span>
    </h2>
</div>
${html}`
        document.querySelector(".recommend-bar").innerHTML = html;
    },
  })
  //# ---------------------------------------------
  function addGoods(goods_id,img_big_logo,title,current_price,price,category) {

    localStorage.removeItem('now')
    let Good = {
        goods_id,
        img_big_logo,
        title,
        price,
        current_price,
        category,
    }
    let arrGood = [Good]
    localStorage.setItem('now', JSON.stringify(arrGood))
    window.location.href = 'http://127.0.0.1:5502/list.html'
}
